<script setup>
import { Delete, Edit, Search, Refresh, Lock } from "@element-plus/icons-vue";
import { ref } from "vue";
import {
  roleMgrListService,
  roleMgrDeleteService,
  roleMgrUpdateStatusService,
  logListService,
} from "@/api";
import OperateNameSelect from "@/components/OperateNameSelect.vue";
import { formatTime, formatStutas } from "@/utils/format";
import { useUserStore } from "@/stores";

const userInfo = useUserStore();

// 列表数据
const articleList = ref([]);
const total = ref(0);
const loading = ref(false);

// 搜索参数
const params = ref({
  pageNum: 1,
  pageSize: 10,
  createTimeBegin: "",
  createTimeEnd: "",
  businessType: "",
  operName: "",
  title: "",
});
// 状态选项
const operName = [
  { label: "正常", value: 1 },
  { label: "禁用", value: 0 },
];
const businessType = [
  { label: "新增", value: "新增" },
  { label: "修改", value: "修改" },
  { label: "删除", value: "删除" },
  { label: "授权", value: "授权" },
  { label: "其它", value: "其他" },
];
// 获取数据
const getArticleList = async () => {
  loading.value = true;
  const { data } = await logListService(params.value);
  console.log(data);
  articleList.value = data.records;
  total.value = data.total;
  loading.value = false;
};
getArticleList();

// 搜索-------start
const onSearch = () => {
  params.value.pageNum = 1;
  getArticleList();
};

// 重置搜索
const onReset = () => {
  reset();
  getArticleList();
};
// 搜索-------end

/**
 * 重置表单内容
 */
const reset = () => {
  params.value = {
    pageNum: 1,
    pageSize: 10,
    createTimeBegin: "",
    createTimeEnd: "",
    businessType: "",
    operName: "",
    title: "",
  };
};

// 分页：改变每页显示的页数-------start
const onSizeChange = (size) => {
  params.value.pageNum = 1;
  params.value.pageSize = size;
  getArticleList();
};
/**
 * 当当前页发生变化时的处理函数
 * 主要用于更新请求参数中的页码，并重新获取文章列表。
 *
 * @param {number} page - 新的当前页码
 */
const onCurrentChange = (page) => {
  // 更新参数中的页码
  params.value.pageNum = page;
  // 调用获取文章列表的函数
  getArticleList();
};
// 分页：改变每页显示的页数-------end
</script>
<template>
  <pageContainer title="日志管理">
    <el-form inline style="width: 100%" :model="params">
      <el-form-item label="操作菜单：">
        <el-input
          placeholder="请输入操作菜单"
          v-model="params.title"
        ></el-input>
      </el-form-item>

      <el-form-item label="操作人员：">
        <OperateNameSelect v-model="params.operName"></OperateNameSelect>
      </el-form-item>
      <el-form-item label="操作类型：">
        <el-select
          style="width: 190px"
          placeholder="请选择操作类型"
          v-model="params.businessType"
        >
          <el-option
            v-for="item in businessType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创造时间：">
        <el-col :span="11">
          <el-date-picker
            v-model="params.createTimeBegin"
            type="date"
            placeholder="开始时间"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="2" style="text-align: center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-date-picker
            v-model="params.createTimeEnd"
            placeholder="结束时间"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="onSearch"
          >搜索</el-button
        >
        <el-button :icon="Refresh" @click="onReset()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="articleList" style="width: 100%" v-loading="loading">
      <el-table-column label="序号" type="index" width="80" sort>
      </el-table-column>
      <el-table-column label="操作菜单" prop="title"> </el-table-column>
      <el-table-column label="操作类型" prop="businessType">
        <template #default="{ row }">
          <el-tag type="primary" v-if="row.requestMethod == 'POST'">
            {{ row.businessType.slice(0, 2) }}
          </el-tag>
          <el-tag type="success" v-else-if="row.requestMethod == 'GET'">
            {{ row.businessType.slice(0, 2) }}
          </el-tag>
          <el-tag type="warning" v-else-if="row.requestMethod == 'PUT'">
            {{ row.businessType.slice(0, 2) }}
          </el-tag>
          <el-tag type="danger" v-else-if="row.requestMethod == 'DELETE'">
            {{ row.businessType.slice(0, 2) }}
          </el-tag>
          <el-tag type="info" v-else> 未知 </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作状态" prop="status">
        <template #default="{ row }">
          <el-tag :type="row.status == 1 ? 'success' : 'danger'">{{
            formatStutas(row.status, "logManager")
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="operName"></el-table-column>

      <el-table-column label="修改时间" prop="updateTime">
        <template #default="{ row }">
          {{ formatTime(row.updateTime, "YYYY年MM月DD HH:mm:ss") }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditArticle(row, 'edit')"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDeleteArticle(row)"
          ></el-button>
        </template>
      </el-table-column> -->
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 使用分页组件 -->
    <Pagination
      :currentPage="params.pageNum"
      :pageSize="params.pageSize"
      :total="total"
      :pageSizes="[10, 20]"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />
  </pageContainer>
</template>
<style lang="scss" scoped></style>
